<template>
	<view class="page" v-if="isRender" :style="{backgroundImage:'url('+ config.login_bg + ')'}">
		<view class="wid100">
			<view style="height: 400rpx;"></view>
			<view class="wid90 mar">
				<image src="../../static/log.png" class="wid100" style="height: 480rpx;"></image>
			</view>
			<view style="height: 80rpx;"></view>
			<view class="wid90 mar log dis disAl disJuC hei80 borRad40" @click="getUserInfo">一键登录</view>
		</view>
		<!-- <view class="page__bd">
			<view class="main">
				<u-image v-if="config.logo" mode="aspectFit" width="160rpx" height="160rpx" :lazy-load="false"
					:fade="false" :src="config.logo" shape="circle">
				</u-image>
				<view class="title u-m-t-30">文明随手拍小程序</view>
			</view>
		</view> -->
		<!-- <view class="page__ft"> -->
			<!-- #ifdef H5 -->
			<!-- <view class="u-m-b-20">H5平台尚未适配</view> -->
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<!-- <u-button :plain="true" :ripple="true" :hair-line="false" shape="circle" @click="getUserInfo">授权登录
			</u-button> -->
			<!-- #endif -->
			<!-- <u-button @click="goBack()" :hair-line="false" :ripple="true" :plain="true" shape="circle">随便逛逛</u-button>
			<view>授权登录即同意<text @click="showAgreement">《用户协议》</text></view> -->
		<!-- </view>
		<u-popup v-model="agreement_show" mode="center" width="690" :closeable="true" border-radius="30">
			<view class="agreement_content">
				<scroll-view scroll-y="true" style="height: calc(100vh - 500rpx);">
					<u-parse :html="config.agreement"></u-parse>
				</scroll-view>
			</view>
		</u-popup> -->
	</view>
</template>
<script>
	export default {
		data() {
			return {
				info: null,
				agreement_show:false,
				isRender: false,
					config: []
				
			}
		},
		onLoad(options) {
	
			this.getPageData();
		},
		methods: {
			showAgreement(){
				this.agreement_show = true;
			},
			async getPageData(cb) {
				let res = await this.$u.api.getPageData({
					page: "userLogin"
				});
				this.config = res.data;
				this.isRender = true;
				typeof cb == 'function' && cb();
			},
			goBack: function(index) {
				this.$util.goBack()
			},
			// #ifdef MP-WEIXIN
			getCode: async function() {
				return new Promise((resolve, reject) => {
					uni.login({
						success: function(res) {
							if (res.code) {
								resolve(res.code);
							} else {
								//login成功，但是没有取到code
								reject('未取得code');
							}
						},
						fail: function(res) {
							reject('用户授权失败wx.login');
						}
					});
				});
			},
			//用户授权得到用户的信息
			/* getUserInfo: function() {
				let that = this;
				wx.getUserProfile({
					lang: 'zh',
					desc: '获取用户登录信息',
					success: async function(e) {
						console.log(e);
						try {
							let code = await that.getCode();
							let data = {
								code: code,
								rawData: e.userInfo
							};
							that.toLogin(data);
						} catch (e) {
							that.$u.toast(e);
						}
					},
					fail: function(e) {
						that.$u.toast(JSON.stringify(e));
					}
				});
			}, */
			//用户授权得到用户的信息
			getUserInfo: async function() {
				let code = await this.getCode();
				let data = {
					code: code
				};
				this.toLogin(data);
			},
			//实际的去登陆
			toLogin: async function(data) {
				let res = await this.$u.api.wxQuickLogin(data);
				if (!res.code) {
					this.$u.toast(res.msg);
					return;
				}
				if (res.data.user) {
					this.$u.vuex('vuex_user', res.data.user);
					this.$u.vuex('vuex_token', res.data.user.token)
					this.$util.goBack()
				}
			}
			// #endif
		}
	}
</script>

<style>
	.page {
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	}
	.log{
		color: #ffffff !important;
		background-color: #2196F3 !important;
	}
	.page__ft {
		padding-left: 50rpx;
		padding-right: 50rpx;
		color: #ffffff;
		text-align: center;
		padding-bottom: 80rpx;
	}
	.agreement_content {
		padding: 80rpx 30rpx 50rpx 30rpx;
	}
	.main {
		display: flex;
		align-items: center;
		flex-direction: column;
		margin-top: 400rpx;
		text-align: center;
		color: #ffffff;
	}

	.u-btn--default {
		background-color: transparent !important;
		border-color: #ffffff !important;
		color: #ffffff !important;
	}

	.u-btn {
		margin-bottom: 30rpx;
	}
</style>
